<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="tab">
    <van-sticky>
      <van-nav-bar
        :title="title"
      />
    </van-sticky>
    <router-view></router-view>
    <div style="height: 50px;"></div>
    <van-tabbar v-model="active" active-color="yellowgreen">
      <van-tabbar-item
      v-for="item in rout"
      :name="item.to"
      :key="item.title"
       :to="item.to" :icon="item.icon">{{ item.title }}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: '/tab/index',
      rout: [
        { title: '首页', icon: 'wap-home-o', to: '/tab/index' },
        { title: '精选', icon: 'apps-o', to: '/tab/sel' },
        { title: '购物车', icon: 'shopping-cart-o', to: '/tab/car' },
        { title: '我的', icon: 'user-o', to: '/tab/my' }
      ]
    }
  },

  // 接收父组件传递过来的参数
  props: {},

  components: {},

  // computed是计算属性，也就是依赖其它的属性计算所得出最后的值
  computed: {
    title () {
      return this.rout.find(v => v.to === this.active).title
    }
  },
  watch: {
    $route: { // 解决高亮跟随页面
      handler (n) {
        this.active = n.path
      },
      deep: true,
      immediate: true
    }
  },

  // 页面初始化方法
  mounted () {},

  // 监听方法 click事件等 ，执行drawFeatures方法
  methods: {}
}

</script>
<style lang='less' scoped>
</style>
